<template>
  <div class="header" :style="{background: background}">
    <van-row type="flex">
      <van-col span="6" >
        <!-- clickBack -->
        <div class="back" v-if="isBack" @click="clickBack">
          <van-icon name="arrow-left" v-if="isBack" :style="{color:iconColor}" />
        </div>
      </van-col>
      <van-col span="13" class="center title" :style="{color:color}">
       {{title}}
      </van-col>
      <!-- <van-col span="6">span: 6</van-col> -->
    </van-row>
  </div>
  
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'Headers',
  props: {
    title: {
      type: String,
      default: ''
    },
    background: {
      type: String,
      default: '#F9FBFC'
    },
    color: {
      type: String,
      default: '#000000'
    },
    iconColor: {
      type: String,
      default: 'rgb(0, 0, 0)'
    },
    isBack: {
      type: Boolean,
      default: true
    },
  },
  computed: { ...mapGetters({ pageData: 'pageData'}) },
  data () {
    return {
      
    }
  },
  methods:{
    clickBack() {
      this.$emit('back')
      this.$router.go(-1)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scope>

.header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 99;
  height: 40px;
  line-height: 40px;
  .van-icon-arrow-left {
    font-size: 16px;
  }
  .title {
    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
    line-height: 40px;
  }
}
.back {
  width: 100%;
  height: 100%;
  padding-left: 10px;
}
</style>
